/**
 * @author wangying
 * 实时渠道信息js
 */
var jq=jQuery.noConflict();
var waterStationCode,waterStationName,dataType;
var beginTime="",endTime="" ;
var chart;
jQuery(document).ready(function()
{
	waterStationCode = parent.waterStationCode;//主界面传入的id
	waterStationName = parent.waterStationName;
	initData();
	
	getHisDateOfWaterLevel();//获取历史数据
	
	refreshWaterStationName();
});

function initData()
{
	beginTime = jq('#beiginTimeOfWaterLevel').val();
	endTime = jq('#endTimeOfWaterLevel').val();
	var selectType = document.getElementById('selectType');
	dataType = selectType.value;
	getStationData();
}
/**
 * 根据选择的查询时间获取数据
 */
function getHisDateOfWaterLevel()
{
	jq("#waterInfoBotton").click(function()
	{
		
		beginTime = jq('#beiginTimeOfWaterLevel').val();
		endTime = jq('#endTimeOfWaterLevel').val();
		var begin =beginTime+" 00:00:00";
		var end = endTime+" 00:00:00";
		var distanceTime =(Date.parse(end)-Date.parse(begin))/3600/1000;
		
		if(beginTime==null || beginTime.trim()=="")
		{
			alert("必须输入起始时间！！");
			return;
		}
		else if(endTime==null || endTime.trim()=="")
		{
			var date = new Date;
			endTime = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
		}
		
		else if(distanceTime<0)
		{
			alert("起始时间必须小于等于结束时间！！");
			return;
		}
		selectTypeChange();
		getStationData();	
	});
}

function selectTypeChange()
{
	var selectType = document.getElementById('selectType');
	dataType = selectType.value;
	switchByType();
	refreshWaterStationName();
}
/**
 * 根据选择的内容，表格中的列名显示不同
 */
function switchByType()
{
	if("压力"==dataType)
	{
		jq("#valueTypeInTable").html("压力(MPa)");
	}
	else if("流量"==dataType)
	{
		
		jq("#valueTypeInTable").html("流量(m³/s)");
	}
	else if("浊度"==dataType)
	{
		jq("#valueTypeInTable").html("浊度(NTU)");
	}
	else if("余氯"==dataType)
	{
		jq("#valueTypeInTable").html("余氯(mg/L)");
	}
}

function refreshWaterStationName(){
	jq("#waterStationNameId").html(waterStationName+dataType+"表");
	jq("#highChartsName").html(waterStationName+dataType+"折线图");	
}

function getStationData()
{
	jq.ajax({			
		url:'GetHistoryDataByIdType.action?id='+waterStationCode+"&type="+dataType+"&beginTime="+beginTime+"&endTime="+endTime,
		type:'POST',
		data:"{}",
		dataType:'json',
		success:function (data)
		{  
		if(data==null || data.length==0)
		{
			jq('#waterLevelData').hide();
			jq('#noData').show();
		}
		else
		{
			jq('#waterLevelData').show();
			jq('#noData').hide();
			
			jq("#waterLevleInfoTable").bootstrapTable('load',data);
			
			var dataValue = [];
			jq.each(data,function(index,content)
			{
					var timestamp = Date.parse(content.time);
					dataValue.push([timestamp,Number(content.value)]);	
			});
			showDataHighCharts(dataValue);
		}
		}		
     });  
}

function showDataHighCharts(dataValue)
{
	jq("#waterInfoContainer").highcharts(
		{
			chart:{
				type:'line',
				events:
					{
					load: function () {
						DynamicChangeParams();
						}
					}
			},
			title:
			{
				text:""
			},
			tooltip: 
			{
				xDateFormat: '%Y-%m-%d %H:%M:%S',
	            shared: true
	        },
	       
			xAxis:
			{
				title: {
	                text: '时间'
	            },
	            endOnTick: true,
	            startOnTick: true,
	            type: 'datetime',  
			},
	        plotOptions:
	        	{
	        	 column:
	        		 {
	        		 borderWidth:0,
	        		 borderColor: " ",
	        		 }
	        	},
	        series: [{ 
	            color: '#00FF00',	            
	            data: dataValue, 
	            marker: {
                    enabled: true
           	 	},
			}			
			]
		},function(chartObj)
		{
			chart = chartObj;
		});
}

function DynamicChangeParams()
{
	beginTime = jq('#beiginTimeOfWaterLevel').val();
	endTime = jq('#endTimeOfWaterLevel').val();
	var begin =beginTime+" 00:00:00";
	var end = endTime+" 00:00:00";
	var distanceTime =(Date.parse(end)-Date.parse(begin))/3600/1000;
	//x轴显示间隔，一天就按小时，多天就按天
	if(distanceTime==0)
	{
		chart.xAxis[0].update({
			labels: {    
                formatter: function () {      
                	return Highcharts.dateFormat('%H:%M', this.value); 
                }  
            } , 
            minTickInterval: 1 * 3600 * 1000,//间隔值
            });
	}
	else 
	{
		chart.xAxis[0].update({
			labels: {    
            formatter: function () {      
            	return Highcharts.dateFormat('%Y-%m-%d', this.value); 
            	}  
			} , 
			minTickInterval: 24 * 3600 * 1000,//间隔值
        	});
	}
	//y轴说明
	
	if(dataType=="流量")
	{
		chart.series[0].update({
			tooltip: {
                valueSuffix: ' m³/s'
            },
            name:dataType});
		chart.yAxis[0].update({
			labels: { 
				formatter: function() {
			        return this.value ;
			    }
			},
			title: {
	            text: dataType+"(m³/s)"
	        },
	        plotLines:[{
	            color:'red',           //线的颜色，定义为红色
	            dashStyle:'solid',     //默认值，这里定义为实线
	            value:150,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
	            width:2                //标示线的宽度，2px
	        },{
	        	color:'red',           //线的颜色，定义为红色
	            dashStyle:'solid',     //默认值，这里定义为实线
	            value:0,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
	            width:2                //标示线的宽度，2px
	        }]
			});
	}
	else if(dataType=="压力")
	{
		chart.series[0].update({
			tooltip: {
                valueSuffix: ' MPa'
            },
            name:dataType});
		chart.yAxis[0].update({
			labels: { 
				formatter: function() {
			        return this.value;
			    }
			},
			title: {
	            text: dataType+"(MPa)"
	        },
	        plotLines:[{
	            color:'red',           //线的颜色，定义为红色
	            dashStyle:'solid',     //默认值，这里定义为实线
	            value:0.5,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
	            width:2            //标示线的宽度，2px
	        },{
	        	color:'red',           //线的颜色，定义为红色
	            dashStyle:'solid',     //默认值，这里定义为实线
	            value:0.2,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
	            width:2                //标示线的宽度，2px
	        }]
			});
	}
		
	else if(dataType=="浊度")
	{
		chart.series[0].update({
			tooltip: {
                valueSuffix: ' NTU'
            },
            name:dataType});
		chart.yAxis[0].update({
			labels: { 
				formatter: function() {
			        return this.value ;
			    }
			},
			title: {
	            text: dataType+"(NTU)"
	        },
	        plotLines:[{
	            color:'red',           //线的颜色，定义为红色
	            dashStyle:'solid',     //默认值，这里定义为实线
	            value:15,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
	            width:2                //标示线的宽度，2px
	        },{
	        	color:'red',           //线的颜色，定义为红色
	            dashStyle:'solid',     //默认值，这里定义为实线
	            value:0,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
	            width:2                //标示线的宽度，2px
	        }]
			
			});
	}
	else if(dataType=="余氯")
	{
		chart.series[0].update({
			tooltip: {
                valueSuffix: ' mg/L'
            },
            name:dataType});
		chart.yAxis[0].update({
			labels: { 
				formatter: function() {
			        return this.value;
			    }
			},
			title: {
	            text: dataType+"(mg/L)"
	        },
	        plotLines:[{
	            color:'red',           //线的颜色，定义为红色
	            dashStyle:'solid',     //默认值，这里定义为实线
	            value:0.03,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
	            width:2                //标示线的宽度，2px
	        },{
	        	color:'red',           //线的颜色，定义为红色
	            dashStyle:'solid',     //默认值，这里定义为实线
	            value:0.01,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
	            width:2                //标示线的宽度，2px
	        }]
			});
	}
	
}